<template>
  <el-card>
    <div class="banner">
      <!-- 搜索头部 -->
      <el-row :gutter="24" >
        <!-- 添加轮播广告按钮 -->
        <el-col :span="6">
          <el-button @click="addBanner">
            <i class="el-icon-plus"></i>
            添加轮播广告
          </el-button>
        </el-col>
        <!-- 右边部分 -->
        <el-col :span="14">
          <el-row :gutter="24" justify="center">
            <!-- 搜索框 -->
            <el-col :span="7">
              <el-input
                type="text"
                placeholder="搜索轮播标题"
                v-model="searchList.rotation.name">
                <!-- 搜索按钮 -->
                <el-col :span="1" slot="append">
                  <el-button type="primary" icon="el-icon-search" @click="cSearchBanner"></el-button>
                </el-col>
              </el-input>
              
            </el-col>
            <!-- 轮播位置下拉框 -->
            <el-col :span="5">
              <el-select v-model="searchList.rotation.desc">
                <el-option
                  v-for="item in bannerSelects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <!-- 状态位置下拉框 -->
            <el-col :span="5">
              <el-select v-model="searchList.rotation.inUse">
                <el-option
                  v-for="item in shelfStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="getBannerList" style="width: 100%" class="table" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column label="轮播图" prop="img" align="center">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.img" 
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="name" align="center"> </el-table-column>
        <el-table-column label="轮播位置" prop="desc" align="center"> </el-table-column>
        <el-table-column label="开始时间" prop="startTime" align="center"> </el-table-column>
        <el-table-column label="结束时间" prop="stopTime" align="center"> </el-table-column>
        <el-table-column label="排序" prop="sort" align="center"></el-table-column>
        <el-table-column label="状态" prop="inUse" align="center">
          <template slot-scope="scope">
                <p :class="{inuse:(scope.row.inUse)}">{{ (scope.row.inUse)?'上架':'下架' }}</p>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchList.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchList.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total=total
        align="center"
        small
        class="pagenation"
        >
      </el-pagination>
    </div>
    <!-- 编辑对话框 -->
    <el-dialog title="修改轮播图" :visible.sync="editFormVisible" width="40%" center>
      <!-- 内容主题部分 -->
      <el-row :gutter="20">
        <el-col :span="16" :offset="4">
          <el-form :model="editForm" label-width="70px" :rules="rules" >
            <!--标题 -->
            <el-form-item label="标题" prop="name">
              <el-input v-model="editForm.name"></el-input>
            </el-form-item>
            <!-- 轮播位置 -->
            <el-form-item label="轮播位置" prop="desc">
              <el-select v-model="editForm.desc">
                <el-option
                  v-for="item in editBannerSelects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 开始时间 -->
            <el-form-item label="开始时间" prop="startTime" >
              <el-form-item >
                <el-date-picker
                    v-model="editForm.startTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right">
                </el-date-picker>
              </el-form-item>
            </el-form-item>
            <!-- 结束时间 -->
            <el-form-item label="结束时间" prop="stopTime">
              <el-date-picker
                  v-model="editForm.stopTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right">
              </el-date-picker>
            </el-form-item>
            <!-- 排序 -->
            <el-form-item label="排序" prop="sort">
              <el-input v-model="editForm.sort"></el-input>
            </el-form-item>
            <!-- 状态 -->
            <el-form-item label="状态" prop="isUse">
              <el-select v-model="editForm.inUse">
                <el-option
                  v-for="item in editShelfStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 跳转连接 -->
            <el-form-item label="跳转连接" prop="url">
              <el-input v-model="editForm.url"></el-input>
            </el-form-item>
            <!-- 图片上传 -->
            <el-form-item label="轮播图" prop="img">
              <el-upload
                class="upload-demo"
                drag
                action="/oss/service/file/upload"
                :limit=1
                :on-success="upLoadImg">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png文件，尺寸为750*360
                </div>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="submmitEditForm">
            确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 删除模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="delDialogVisible"
      width="30%">
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="delDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="delBannerHandler">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {getBannerList,delBanner,editBanner} from '../../http/content'
export default {
  name: "Banner",
  data() {
    // 跳转连接正则
    var jumpUrl = (rule, value, callback) => {
      let bannerUrlReg = /\/banner\/\d+$/g;
      if(value ==''){
        callback(new Error('请输入跳转url'));
      }else if (!bannerUrlReg.test(value) && value != '') {
        callback(new Error("请输入正确的跳转url"));
      } else {
        callback();
      }
    };
    //排序正则
    var Vsort = (rule, value, callback) => {
      let sortReg = /^\d+$/g;
      if(value ==''){
        callback(new Error('请输入正整数'));
      }else if (!sortReg.test(value) && value != '') {
        callback(new Error("请输入正确的正整数"));
      } else {
        callback();
      }
    };
    return {
      total:null,
      getBannerList:[],
      searchList: {
        rotation:{
          inUse: '',
          desc: '',
          name:'',
        },
        page:1,
        size:5
      },
      delDialogVisible:false,
      bannerSelects: [
        {
          value: "",
          label: "全部位置",
        },
        {
          value: "首页轮播",
          label: "首页轮播",
        },
        {
          value: "商城轮播",
          label: "商城轮播",
        },
      ],
      editBannerSelects: [
        {
          value: "首页轮播",
          label: "首页轮播",
        },
        {
          value: "商城轮播",
          label: "商城轮播",
        },
      ],
      shelfStatus: [//主页上架状态
        {
          value: "",
          label: "全部状态",
        },
        {
          value: true,
          label: "上架",
        },
        {
          value: false,
          label: "下架",
        },
      ],
      editShelfStatus: [//编辑上架状态
        {
          value: true,
          label: "上架",
        },
        {
          value: false,
          label: "下架",
        },
      ],
      editFormVisible: false,
      editForm: {},
      //删除id
      nowId:null,
      rules: {
        name: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 100 个字符", trigger: "blur" },
        ],
        url: [
          {validator: jumpUrl, trigger: "blur" },
        ],
        sort:[
          { min: 1, max: 5, message: "长度在 1 到 10 个字符", trigger: "blur" },
          {validator: Vsort, trigger: "blur" }
        ],
      }
    };
  },
  created:function(){
    this.searchBanner();
    console.log(this.searchList,'初始化加载请求参数');
  },
  methods: {
    //弹出编辑模态框
    handleEdit(index, row) {
      this.editFormVisible = true;
      this.nowId = row.id;
      //返回数据，自动填写编辑表单
      this.editForm = {...row};
    },
    //编辑上传图片
    upLoadImg(response){
      this.editForm.img = response.data.fileUrl;
    },
    //取消编辑
    cancelEdit(){
      this.editFormVisible = false;
      this.editForm = {};
    },
    //确认编辑提交表单
    submmitEditForm(){
      editBanner(this.editForm)
      .then(res => {
        if(res.data.code != 20000) {
          this.nowId = null;
          return this.$message.error(res.data.message);
        }
        this.editFormVisible = false;
        this.$message.success('编辑成功');
        this.nowId = null;
        this.editForm = {};
        this.searchBanner();
        
      })
      .catch(err => {
        this.$message.error(err);
      })
    },
    //弹出删除模态框
    handleDelete(index,row) {
      this.delDialogVisible = true;
      this.nowId = row.id;
      console.log(this.nowId,'当前id');
    },
    //确认删除轮播图
    delBannerHandler(){
      delBanner(this.nowId)
      .then(res => {
        if(res.data.code != 20000) {
          this.nowId = null;
          return this.$message.error(res.data.message);
        }
        this.$message.success('删除成功');
        this.nowId = null;
        this.delDialogVisible = false;
        let totalPage = Math.ceil((this.total - 1) / this.searchList.size);
        this.searchList.page = this.searchList.page>totalPage ? totalPage:this.searchList.page;
        this.searchList.page=this.searchList.page<1 ? 1:this.searchList.page;
        this.searchBanner();
      })
      .catch(err => {
        this.$message.error(err);
      })
    },
    addBanner() {
      //新增轮播
      this.$router.push("/content/banner/addBanner");
    },
    //条件搜索
    cSearchBanner(){
      this.searchList.page = 1;
      this.searchBanner();
      console.log(this.getBannerList,'条件查询数据');
    },
    //搜索轮播
    searchBanner() {
      getBannerList(this.searchList)
        .then(res => {
          console.log('前端请求返回参数',res);
          this.getBannerList = res.data.data.result.rotations;
          this.total = res.data.data.result.count;
        })
        .catch(err => {
          console.log('请求失败', err);
      })    
    },
    // 分页大小改变
    handleSizeChange(newSize) {
      this.searchList.size = newSize;
      this.searchList.page = 1;
      this.searchBanner();
    },
    //当前页改变
    handleCurrentChange(newSize) {
      this.searchList.page = newSize;
      this.searchBanner();
    },
  }     
};
</script>

<style scoped lang="less">
.header {
  min-width: 1170px;
}
//上架状态颜色
.inuse{
    color: #009900;
}
//表格
.table {
  margin-top: 20px;
}
// 分页
.pagenation{
    margin-top: 20px;
}
</style>
